<script setup lang="ts">
import { useQueue } from 'wot-design-uni';
import { PaymentItemApi } from '@/api/payment-item';
import AuthBar from '@/components/authBar/index.vue';
import { DictKeyEnum } from '@/enums/dict.enums';
import { useRequest } from '@/hooks/useRequest';
import { useDictStore } from '@/store/dictStore';
import { currRoute, withQueryString } from '@/utils/router.utils';

const { getDictLabel } = useDictStore();

const { closeOutside } = useQueue();

const { query } = currRoute();

const {
  data: itemDetail
} = useRequest(
  () => PaymentItemApi.getPaymentItemDetail(Number(query.itemId))
);

function handlePay() {
  uni.navigateTo({
    url: withQueryString('/pages/selfPay/payMethod', {
      itemId: query.itemId,
      totalAmount: query.totalAmount
    })
  });
}
</script>

<template>
  <view class="pay-confirm flex-col" @click="closeOutside">
    <AuthBar />
    <view class="h-0 flex-1 overflow-auto">
      <view class="pay-confirm__title">
        金额确认
      </view>
      <view class="pay-confirm__subtitle">
        请确认以下缴费信息
      </view>
      <view class="confirm-content">
        <view class="confirm-content__title">
          {{ itemDetail?.itemName }}
        </view>
        <view class="confirm-content__cell flex justify-between">
          <view class="content-cell__title flex items-center">
            <i class="iconfont icon-addbox" />
            {{ itemDetail?.departmentName }}
          </view>
          <view class="content-cell__price flex items-center">
            <i class="iconfont icon-zhangdan" />
            账单号: {{ itemDetail?.billNo }}
          </view>
        </view>

        <view class="divider" />

        <view class="confirm-section__title">
          缴费明细
        </view>

        <!-- 明细表 -->
        <view class="pay-table">
          <view class="pay-table__header">
            <view class="pay-header__row">
              <view class="col">
                项目名称
              </view>
              <view class="col">
                单价
              </view>
              <view class="col">
                数量
              </view>
              <view class="col">
                总价
              </view>
            </view>
          </view>
          <view class="pay-table__body">
            <view v-for="item in itemDetail?.recordOfFees" :key="item.id" class="pay-table__row">
              <view class="col">
                <view>{{ item.itemName }}</view>
                <view v-if="item.itemCategory" class="expense-type">
                  {{ getDictLabel(item.itemCategory, DictKeyEnum.FEE_ITEM_CATEGORY) }}
                </view>
              </view>
              <view class="col">
                ¥{{ item.unitPrice }}
              </view>
              <view class="col">
                {{ item.quantity }}
              </view>
              <view class="col">
                ¥{{ item.totalPrice }}
              </view>
            </view>
          </view>
        </view>

        <view class="expense-section">
          <view class="expense-section__cell flex items-center justify-between">
            <view class="expense-section__cell-title flex items-center">
              <view class="mr-10">
                医保可报销金额
              </view>
              <wd-tooltip content="医保报销部分将直接从总金额中扣除" placement="top-start">
                <view class="font-bold">
                  <wd-icon name="info-circle" size="30px" color="var(--primary)" />
                </view>
              </wd-tooltip>
            </view>
            <view class="expense-section__cell-price">
              ¥{{ itemDetail?.insuranceReimbursementAmount }}
            </view>
          </view>
          <view class="expense-section__desc">
            医保报销部分已自动计算，实际报销金额以医保系统为准
          </view>
        </view>

        <view class="expense-section__total">
          <view class="pay-total__cell flex items-center justify-between">
            <view>总金额</view>
            <view class="pay-total__price">
              ¥{{ itemDetail?.totalPrice }}
            </view>
          </view>
          <view class="flex-center">
            <view class="confirm-btn mt-24 w-708">
              <wd-button block @click="handlePay">
                确认
              </wd-button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '自助缴费',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.pay-confirm {
  background-color: var(--bg-color);
  height: 100%;

  .pay-confirm__title {
    color: var(--text-color);
    font-size: 60px;
    font-weight: bold;

    text-align: center;
    margin-top: 40px;
  }

  .pay-confirm__subtitle {
    color: var(--secondary-text-color);
    text-align: center;
    margin-bottom: 22px;
    font-size: 28px;
  }

  .confirm-content {
    background: #e2ecfc;
    border-radius: 20px;
    border: 2px solid #e6effd;
    margin: 0 48px 48px;
    box-sizing: border-box;
    padding: 48px;
  }

  .confirm-content__title {
    color: var(--text-color);
    font-size: 48px;
    font-weight: bold;
  }

  .confirm-content__cell {
    color: #3d3d3d;
    font-size: 34px;
    margin-top: 24px;

    .iconfont {
      font-size: 34px;
      color: #4a73b3;

      &.icon-addbox {
        font-size: 36px;
      }
    }
  }

  .divider {
    border: 1px solid #3c7ce2;
    width: 100%;
    margin-top: 24px;
  }

  .confirm-section__title {
    color: var(--text-color);
    font-size: 36px;
    font-weight: bold;

    margin-top: 50px;
  }

  .expense-section {
    background: #f3f7ff;
    border-radius: 20px;
    padding: 25px 30px;
    margin-top: 20px;

    .expense-section__cell {
      color: var(--text-color);
      font-size: 32px;
      font-weight: 500;

      margin-bottom: 14px;
      --wot-tooltip-bg: #fff;
      --wot-tooltip-color: var(--primary);
      --wot-tooltip-fs: 20px;

      :deep(#pos) {
        display: none;
      }
    }

    .expense-section__desc {
      color: #3d3d3d;
      font-size: 24px;
    }
  }

  .pay-table {
    width: 100%;
    display: table;
    table-layout: fixed;
    border-spacing: 0 10px;

    .pay-table__header {
      display: table-header-group;

      .pay-header__row {
        display: table-row;
        background: var(--primary);
      }

      .col {
        display: table-cell;
        color: #fff;
        font-size: 28px;
        padding: 30px 12px;
        text-align: center;
        box-sizing: border-box;
        background: var(--primary);
        border-top: 2px solid rgba(255, 255, 255, 0.5);
        border-bottom: 2px solid rgba(255, 255, 255, 0.5);
        position: relative;

        &::after {
          content: '';
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          width: 4px;
          height: 22px;
          background: #fff;
        }

        &:first-child {
          border-radius: 10px 0 0 10px;
        }

        &:last-child {
          border-radius: 0 10px 10px 0;

          &::after {
            display: none;
          }
        }
      }
    }

    .pay-table__body {
      display: table-row-group;

      .pay-table__row {
        display: table-row;
        margin-top: 10px;

        .col {
          display: table-cell;
          font-size: 32px;
          text-align: center;
          color: var(--text-color);
          font-weight: 500;

          background: #ebf3ff;
          padding: 36px 0;
          border-top: 2px solid rgba(255, 255, 255, 0.5);
          border-bottom: 2px solid rgba(255, 255, 255, 0.5);

          &:first-child {
            border-radius: 10px 0 0 10px;
          }

          &:last-child {
            border-radius: 0 10px 10px 0;
          }

          .expense-type {
            background: #dfecff;
            border-radius: 100px;
            color: var(--primary);
            padding: 2px 22px;
            display: inline-block;
            margin-top: 6px;
          }
        }
      }
    }
  }

  .expense-section__total {
    background: #f3f7ff;
    border-radius: 20px;
    margin-top: 30px;
    padding-bottom: 37px;

    .pay-total__cell {
      font-size: 36px;
      font-weight: bold;
      color: var(--text-color);

      padding: 30px;

      .pay-total__price {
        font-size: 52px;
      }
    }

    .confirm-btn {
      --wot-button-medium-height: 124px;
      --wot-button-medium-fs: 42px;

      :deep(.wd-button) {
        font-weight: bold;
      }
    }
  }
}
</style>
